<template>
  <el-card>
    <el-row :gutter='20' class="header">
        <el-col :span='7'>
            <h1>{{route.query.officename}}</h1>
        </el-col>
    </el-row>
  <div v-for="item in tableData" :key="item.id">
  <div class="common-layout">
    <el-container>
      <el-aside width="100px" height="120px">
        <div class="info">
        <img :src="item.picpath">
        </div>
      </el-aside>
      <el-main>
        <el-descriptions :title="item.dname" class="margin-top"
        :column="3"
        :size="large"
        border>
    <template #extra>
        <el-button type="primary" @click="handleClick(item.dname)">预约</el-button>
      </template>
        <el-descriptions-item label="费用">{{item.fee}}</el-descriptions-item>
        <el-divider />
        <el-divider />
    </el-descriptions>
      </el-main>
    </el-container>
  </div>
  </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDoctor } from '@/api/yuyue1-1'
const route = useRoute()
const router = useRouter()

const handleClick = (dname) => {
    router.push({
        path: '/user/yuyue1-2',
        query: {
            dname
        }
    })
}

const tableData = ref([])
const initGetUsers = async() => {
  const res = await getDoctor(route.query.officename)
  console.log(res)
  tableData.value = res.data.datas
}
initGetUsers()
</script>

<style lang='scss' scoped>
.header{
    padding-bottom: 16px;
    box-sizing: border-box;
}
.info img{
    height: 120px;
    width: 100px;
}
</style>
